<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
    <title>日志窗口</title>
</head>
<style>
    html,
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: #1e1e1e;
        color: #fff;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        border: none;
    }

    .ml_header {
        padding: 6px 0 0 20px;
        width: calc(100% - 20px);
        height: 30px;
        align-items: center;
    }

    #log-container {
        flex-grow: 1;
        /* 撑开剩余高度 */
        width: calc(100% - 20px);
        padding: 10px;
        background-color: green;
        overflow: auto;
        /* 允许滚动 */
        scrollbar-width: none;
        /* 隐藏滚动条（Firefox） */
    }

    /* 隐藏滚动条（Chrome、Edge、Safari） */
    #log-container::-webkit-scrollbar {
        display: none;
    }

    .log-item {
        margin-bottom: 0px;
        padding: 0;
        background: transparent;
        border-radius: 3px;
        color: white;
        font-size: 14px;
        white-space: pre-wrap;
        /* 让换行符生效 */
    }

    .ml_buttons a {
        color: white;
    }
</style>

<body>
    <div class="ml_header">
        <div class="ml_buttons">
            <a href="#" class="ml_button_item">清除</a>
            <a href="https://www.baidu.com" target="_blank" class="ml_button_item">百度</a>
        </div>
    </div>
    <div id="log-container"></div>
</body>
<script>

    const logContainer = document.getElementById('log-container');

    let autoScroll = true; // 默认自动滚动
    console.log(`======111111111>执行了增加日志`);

    // 监听新日志
    MyAPI.newLog((_, message) => {
        console.log(`======>执行了增加日志`);
        const logItem = document.createElement('div');
        logItem.className = 'log-item';
        logItem.textContent = `${new Date().toLocaleTimeString()}:  ${message}`;
        logContainer.appendChild(logItem);

        // 只有在用户没有手动滚动时，才自动滚动到底部
        if (autoScroll) {
            logContainer.scrollTop = logContainer.scrollHeight;
        }
    });

    // 监听滚动事件，判断用户是否手动滚动
    logContainer.addEventListener('scroll', () => {
        // 当滚动条接近底部时，启用自动滚动，否则禁用
        autoScroll = logContainer.scrollHeight - logContainer.scrollTop <= logContainer.clientHeight + 10;
    });


    const buttons = document.getElementsByClassName('ml_button_item')
    Array.from(buttons).forEach((element, index) => {
        element.addEventListener('click', async function () {
            switch (element.textContent) {
                case "清除":
                    logContainer.innerHTML = '';
                    break;
                default:
                    break;
            }
        });
    });
</script>

</html>